<template>
  <div>
    <div class="member-tab border-top dlIndex">
      <div class="tab">
        <div class="tab-head" style="position: fixed;top: 0.96rem;border-bottom: 1px solid #e8e8e8">
          <ul class="tab-nav nav2">
            <li
              v-for="(value, key) in menus.list"
              :class="{active: key == menus.checked }"
              @click="changeMenu(key)">
              <router-link id="tab-class01lia" :to="{name:'DlDaShou',params: { state: value.state }}" replace>
                {{value.name}}
              </router-link>

            </li>
          </ul>
        </div>

        <div class="tab-body">

          <!-- 交易中的商品 -->
          <div class="tab-panel border-top2 active" :class="{maginbottom:bottomShow}" id="tab-class01" style="margin-top: 0.96rem">

            <!-- <div @click="fabupeilian" class="fixed-button border-top fixed-bottom" data-style="fixed-bottom"
                 v-if="bottomShow">
              <div class="redbutton"><a>我要做陪练赚钱</a></div>
            </div> -->


            <mt-loadmore
              :bottom-all-loaded="allLoaded" ref="loadmore" id="boxs"
              v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"
            >
              <div class="list-empty" v-if="hideOrder">
                <p><img src="~images/gamelogo.png">
                </p><span>您还没有订单
              </span>
              </div>

              <p id="coins_id" v-if="showCoins">
                <img src="~images/coins/loading-sm.gif">
                <span>请等待。。。</span>
              </p>

              <div v-if="$route.params.state=='publish'">
                <div v-for="item in Dashoulist" class="pro-col border-bottom2">
                  <div><a class="shareopen">
                    <div class="pro-list border-top border-top">
                      <div class="pro-pic">
                        <img :src="item.avatarUrl">
                        <div class="pro-cata5">陪</div>
                      </div>
                      <div class="pro-title">
                        <p class="catagory">{{item.gameName}}/{{item.regionName}}/{{item.serverName}}</p>
                        <p class="title">
                          【{{item.initialSparringDanName}}-{{item.finallySparringDanName}}】{{item.myAdvantage}}</p>
                        <p class="price">
                          ￥{{item.trainingFee}}/场
                          <span @click="opshow(item.id)" data-id="138" class="buyer-operation"></span></p></div>
                    </div>
                  </a>
                    <a>
                      <div class="pro-list2 border-bottom"><span class="buyer-status">
                      {{item.sparringStatus == 1 ? '审核中...' : (item.sparringStatus == 2 ? '发布成功，等待玩家接单' : '')}}
                </span>
                        <span class="jican">
                    已接{{item.statisticCount}}场</span></div>
                    </a></div>

                </div>
              </div>

              <!--进行中的-->
              <div v-else-if="$route.params.state=='process'">
                <div v-for="item in Dashoulist" class="pro-col border-bottom2">

                  <div class="pro-list border-top border-top">
                    <a>
                      <div class="pro-pic">
                        <img :src="item.orderImg || defaultImg">
                        <div :class="item.orderType==5?'pro-cata5':'pro-cata4'">{{item.orderType == 5 ? '陪' : '代'}}
                        </div>
                      </div>
                      <div class="pro-title">
                        <p class="catagory">{{item.gameName}}/{{item.regionName}}/{{item.serverName}}</p>
                        <p v-if="item.mainOrderNum">{{item.levelingCombo}}</p>
                        <p v-else-if="item.orderType!=5" class="title" style=
                          "white-space: nowrap;
                     text-overflow: ellipsis;
                     overflow: hidden;
                     ">
                          {{item.comboType == 'elevateRank' ? '升段位' : (item.comboType == 'elevateGrade' ? '升等级' : '')}} {{item.currentLevel}}-
                          {{item.targetLevel}} {{item.levelComboDay}}天完成</p>
                        <p v-else class="title" style=
                          "white-space: nowrap;
                     text-overflow: ellipsis;
                     overflow: hidden;
                     ">
                          {{item.comboType == 'elevateRank' ? '升段位' : (item.comboType == 'elevateGrade' ? '升等级' : '')}}{{item.roleName}}  {{item.playerLevel}}陪练{{item.completeSparringSessions}}场</p>

                        <p class="price">￥{{item.totalAmount}}</p></div>
                    </a></div>
                  <div v-if="item.orderType==5">
                    <div v-if="item.orderStatus==2">
                      <router-link :to="{name:'DlDsTransaction',query:{orderNum:item.orderNum,orderType:item.orderType,type:2}}">

                        <div class="pro-list2 border-bottom" v-if="item.message!=null&&item.message!=0">
                                <span class="buyer-status5">
                                  您有{{item.message}}条新信息
                                </span>
                          <span class="buyer-chat">聊天</span>
                        </div>

                        <div class="pro-list2 border-bottom" v-else>
                            <span class="buyer-status5">
                              陪练中</span>
                          <span class="buyer-chat">聊天</span>
                        </div>
                      </router-link>
                      <div class="pro-list2b border-bottom">
                        <div class="caozuo fw f30">
                          <a class="ared" @click="confirms(item.orderNum,item.completeSparringSessions,item.totalAmount)">申请完成</a>
                          <router-link :to="{name:'DlBuyerAppeal',query:{orderNum:item.orderNum,type:2}}" class="awhite">
                            我要申诉
                          </router-link>
                        </div>

                      </div>
                    </div>
                    <div v-else-if="item.orderStatus==3">
                      <router-link :to="{name:'DlDsTransaction',query:{orderNum:item.orderNum,orderType:item.orderType,type:2}}">
                        <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              陪练中,已申请完成</span>
                          <span class="buyer-chat">聊天</span>
                        </div>
                      </router-link>
                    </div>
                    <div v-else>

                      <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              陪练完成</span>
                        <span class="buyer-chat">聊天</span>
                      </div>

                    </div>

                  </div>
                  <div v-else>
                    <div v-if="item.orderStatus==2">
                      <router-link :to="{name:'DlDsTransaction',query:{orderNum:item.orderNum ? item.orderNum : item.mainOrderNum,orderType:item.orderType,type:2,mainOrderNum:item.mainOrderNum ? true : false}}">

                        <div class="pro-list2 border-bottom" v-if="item.unreadNum!=null&&item.unreadNum!=0">
                                <span class="buyer-status5">
                                  您有{{item.unreadNum}}条新信息
                                </span>
                          <span class="buyer-chat">聊天</span>
                        </div>

                        <div class="pro-list2 border-bottom" v-else>
                            <span class="buyer-status5">
                              代练中</span>
                          <span class="buyer-chat">聊天</span>
                        </div>
                      </router-link>
                      <div class="pro-list2b border-bottom">
                        <div class="caozuo fw f30">
                          <a class="ared" @click="confirm(item.orderNum)">申请完成</a>
                          <router-link :to="{name:'DlBuyerAppeal',query:{orderNum:item.orderNum ? item.orderNum : item.mainOrderNum,type:2}}" class="awhite">
                            我要申诉
                          </router-link>
                        </div>

                      </div>
                    </div>
                    <div v-else-if="item.orderStatus==3">
                      <router-link :to="{name:'DlDsTransaction',query:{orderNum:item.orderNum ? item.orderNum : item.mainOrderNum,orderType:item.orderType,type:2,mainOrderNum:item.mainOrderNum ? true : false}}">

                        <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              代练中</span>
                          <span class="buyer-chat">聊天</span>
                        </div>
                      </router-link>

                    </div>
                    <div v-else>

                      <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              代练完成</span>
                        <span class="buyer-chat">聊天</span>
                      </div>

                    </div>

                  </div>

                </div>

              </div>

              <!--已完成-->
              <div v-else-if="$route.params.state=='complete'">
                <div v-for="item in Dashoulist" class="pro-col border-bottom2">

                  <div class="pro-list border-top border-top">
                    <a href="javascript:">
                      <div class="pro-pic">
                        <img :src="item.orderImg || defaultImg">
                        <div :class="item.orderType==5?'pro-cata5':'pro-cata4'">{{item.orderType == 5 ? '陪' : '代'}}
                        </div>
                      </div>
                      <div class="pro-title">
                        <p class="catagory">{{item.gameName}}/{{item.regionName}}/{{item.serverName}}</p>
                        <p class="title" style="white-space: nowrap;text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;" v-if="item.mainOrderNum">{{item.levelingCombo}}</p>
                        <p class="title" style="white-space: nowrap;text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;" v-else-if="item.orderType == 5">
                           {{item.roleName}} {{item.playerLevel}} 陪练{{item.completeSparringSessions}}场
                        </p>
                        <p class="title" style="white-space: nowrap;text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;" v-else>
                          {{item.comboType == 'elevateRank' ? '升段位' : (item.comboType == 'elevateGrade' ? '升等级' : '')}} {{item.currentLevel}}-
                          {{item.targetLevel}} {{item.levelComboDay}}天完成</p>
                        <p class="price">￥{{item.totalAmount}}</p>
                      </div>
                    </a>
                  </div>

                  <div v-if="item.orderType==5">
                    <div v-if="item.orderStatus==2">
                      <router-link :to="{name:'DlDsTransaction',query:{orderNum:item.orderNum,orderType:item.orderType,type:2}}">

                        <div class="pro-list2 border-bottom" v-if="item.unreadNum!=null&&item.unreadNum!=0">
                                <span class="buyer-status5">
                                  您有{{item.unreadNum}}条新信息
                                </span>
                          <span class="buyer-chat">聊天</span>
                        </div>

                        <div class="pro-list2 border-bottom" v-else>
                            <span class="buyer-status5">
                              陪练中</span>
                          <span class="buyer-chat">聊天</span>
                        </div>
                      </router-link>
                      <div class="pro-list2b border-bottom">
                        <div class="caozuo fw f30">
                          <a class="ared" @click="confirm(item.orderNum)">申请完成</a>
                          <router-link :to="{name:'DlBuyerAppeal',query:{orderNum:item.orderNum ? item.orderNum : item.mainOrderNum,type:2}}" class="awhite">
                            我要申诉
                          </router-link>
                        </div>

                      </div>
                    </div>
                    <div v-else-if="item.orderStatus==3">
                      <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              陪练中,已申请完成</span>
                        <span class="buyer-chat">聊天</span>
                      </div>
                    </div>
                    <div v-else>
                      <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              陪练完成</span>
                        <span class="buyer-chat">聊天</span>
                      </div>
                    </div>

                  </div>
                  <div v-else>
                    <div v-if="item.orderStatus==2">
                      <router-link :to="{name:'DlDsTransaction',query:{orderNum:item.orderNum,orderType:item.orderType,type:2}}">

                        <div class="pro-list2 border-bottom" v-if="item.unreadNum!=null&&item.unreadNum!=0">
                                <span class="buyer-status5">
                                  您有{{item.unreadNum}}条新信息
                                </span>
                          <span class="buyer-chat">聊天</span>
                        </div>

                        <div class="pro-list2 border-bottom" v-else>
                            <span class="buyer-status5">
                              代练中</span>
                          <span class="buyer-chat">聊天</span>
                        </div>
                      </router-link>
                      <div class="pro-list2b border-bottom">
                        <div class="caozuo fw f30">
                          <a class="ared" @click="confirm(item.orderNum)">申请完成</a>
                          <router-link :to="{name:'DlBuyerAppeal',query:{orderNum:item.orderNum,type:2}}" class="awhite">
                            我要申诉
                          </router-link>
                        </div>

                      </div>
                    </div>
                    <div v-else-if="item.orderStatus==3">
                      <router-link :to="{name:'DlDsTransaction',query:{orderNum:item.orderNum,orderType:item.orderType,type:2}}">
                        <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              代练中</span>
                          <span class="buyer-chat">聊天</span>
                        </div>
                      </router-link>
                    </div>
                    <div v-else>
                      <div class="pro-list2 border-bottom">
                            <span class="buyer-status5">
                              代练完成</span>
                        <span class="buyer-chat">聊天</span>
                      </div>
                    </div>

                  </div>


                </div>
              </div>

            </mt-loadmore>
          </div>
          <!-- 我买到的商品 -->
          <div class="tab-panel border-top2 " id="tab-class02">

          </div>
          <div class="tab-panel border-top2 " id="tab-class03">

          </div>


        </div>

      </div>
      <div id="kf2" class="kf2" @click="goToServe(2248700294)">
        <a href="javascript:"><img src="~images/kf2.png" width="100%"></a>
      </div>

      <!--修改信息-->
      <transition name="fadeUp">
        <div class="change" v-if="showChange">
          <div class="operation">
            <a @click="deletedDa()" id="deleted">删除</a>
          </div>
          <div class="upload-cancel">
            <a @click="cancel">取消</a>
          </div>
        </div>
      </transition>



    </div>
  </div>
</template>
<script>
  export default {
    name: 'DlDaShou',
    data () {
      return {
        defaultImg:require('images/default_img.jpg'),
        showChange:false,
        Dashoulist: [],
        hideOrder: false,
        kaiguan1: false,
        kaiguan2: false,
        kaiguan3: false,
        showCoins: false,
        busy: false,
        allLoaded: false,
        pageSize: 30,
        start: 0,
        bottomShow: false,
        postData: {},
        idDashou:'',
        menus: {
          list: {
            publish: {
              state: 'publish',
              name: '我发布的',
            },
            process: {
              state: 'process',
              name: '进行中的',
            },
            complete: {
              state: 'complete',
              name: '已完成的',
            },

          },
          checked: "publish"
        },

      }
    },


    methods: {
      deletedDa(){
        this.$messagebox({
          message: '确认删除此发布单?',
          showCancelButton: true,
          confirmButtonClass: "dlMessageboxConfrim",
          cancelButtonClass: "dlMessageboxCancel",
        }).then(action => {
          console.log(action)
          if (action == "confirm") {
            this.$http.post(this.$CONSTANTS.APIdl + 'sparring/downSparring', {
              id:this.idDashou
            }).then((res) => {
              console.log(res);
              if(res.body.responseStatus.code == "00"){
                this.showChange = false
                this.changeMenu(this.$route.params.state);
              }


            }, (res) => {
              console.log(res)
            });
          } else {
            return false
          }
        })
      },
      opshow(itemId){
        this.idDashou = itemId
        if( this.showChange == true){
          this.showChange = false
        }else{
          this.showChange = true
        }

      },
      cancel(){
        this.showChange = false
      },
      confirm(orderNum){
        this.postData.orderNum = orderNum;

        this.$messagebox({
          message: '是否确定完成?',
          showCancelButton: true,
          confirmButtonClass: "dlMessageboxConfrim",
          cancelButtonClass: "dlMessageboxCancel",
        }).then(action => {
          console.log(action)
          if (action == "confirm") {
            this.$http.post(this.$CONSTANTS.APIdl + 'bullyOrder/applycomplete', this.postData).then((res) => {
              console.log(res);
              this.changeMenu(this.$route.params.state);
            }, (res) => {
              console.log(res)
            });
          } else {
            return false
          }
        })

      },
      confirms(orderNum,completeSparringSessions,totalAmount){

        this.postData.orderNum = orderNum;

        this.$messagebox({
          message: '<p>陪练'+completeSparringSessions+'场</p><p>玩家需支付'+totalAmount+'元陪练费</p>',
          showCancelButton: true,
          confirmButtonClass: "dlMessageboxConfrim",
          cancelButtonClass: "dlMessageboxCancel",
        }).then(action => {
          console.log(action)
          if (action == "confirm") {
            this.$http.post(this.$CONSTANTS.APIdl + 'bullyOrder/applycomplete', this.postData).then((res) => {
              console.log(res);
              this.changeMenu(this.$route.params.state);
            }, (res) => {
              console.log(res)
            });
          } else {
            return false
          }
        })
      },
      BackHome(){
        location.href = "/dl/dl-center.html"
      },
      goToServe(qq){

        if (/baidu/i.test(navigator.userAgent.toLowerCase())) {
          alert('"联系客服"暂不支持当前浏览器，建议使用QQ浏览器、UC浏览器')
        } else {
          location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=' + qq + '&version=1&src_type=web&web_src=oicqzone.com'
        }
      },
      // fabupeilian: function () {
      //   /* this.$router.push(
      //     {name: 'PlSearchGame'}
      //   ) */
      //   location.href='/pl/search-game.html?usertype=2'
      // },
      async loadMore() {
        var self = this;
        self.busy = true;
        this.start = this.start + 1;
        if (this.menus.checked == "publish") {
          this.bottomShow = true;
          this.hideOrder = false;
          this.kaiguan1 = true;
          this.kaiguan2 = false;
          this.kaiguan3 = false;
          this.$http.post(this.$CONSTANTS.APIdl + "sparring/getMySparringList",{
            pageIndex: this.start,
            pageSize: this.pageSize, 
          }).then((res) => {

            if (this.kaiguan1) {
              this.showCoins = false
              this.hideOrder = false
              console.log(res.body.levelingEO)
              this.hideOrder = false
              if (res.body.levelingEO == undefined) {
                this.hideOrder = true
                this.Dashoulist = []
              }
              if (res.body.levelingEO.length == 0 && this.start == 1) {
                this.hideOrder = true
                this.Dashoulist = []
              }
              else {
                res.body.levelingEO.forEach(
                  (item, index) => {
                    console.log(item)
                    this.Dashoulist.push(item);
                  }
                )

                if (res.body.levelingEO.length == this.pageSize) {
                  this.busy = false;
                }
              }
            }


          })
        }
        else if (this.menus.checked == "process") {
          this.kaiguan1 = false;
          this.kaiguan2 = true;
          this.kaiguan3 = false;
          this.hideOrder = false
          await this.$http.get(this.$CONSTANTS.APIdl + "bullyOrder/list2", {
            params: {
              status: 2,
              pageIndex: this.start,
              pageSize: this.pageSize
            }
          }).then((res) => {
            if (this.kaiguan2) {
              this.showCoins = false
              console.log(res.body.data)
              this.hideOrder = false
              if (res.body.data == undefined) {
                this.hideOrder = true
                this.Dashoulist = []
              } else {
                res.body.data.forEach(
                  (item, index) => {
                    console.log(item)
                    this.Dashoulist.push(item);
                  }
                )

                if (res.body.data.length == this.pageSize) {
                  this.busy = false;
                }


              }
            }


          })
        }
        else if (this.menus.checked == "complete") {
          this.hideOrder = false
          this.kaiguan1 = false;
          this.kaiguan2 = false;
          this.kaiguan3 = true;
          this.$http.get(this.$CONSTANTS.APIdl + "bullyOrder/list2", {
            params: {
              status: 3,
              pageIndex: this.start,
              pageSize: this.pageSize
            }
          }).then((res) => {
            if (this.kaiguan3) {
              this.showCoins = false
              console.log(res.body.data)
              this.hideOrder = false
              if (res.body.data == undefined) {
                this.hideOrder = true
                this.Dashoulist = []
              } else {
                res.body.data.forEach(
                  (item, index) => {
                    console.log(item)
                    this.Dashoulist.push(item);
                  }
                )

                if (res.body.data.length == this.pageSize) {
                  this.busy = false;
                }
              }
            }


          })
        }

      },
      changeMenu(key){
        this.bottomShow = false;
        this.showChange =false;
        this.Dashoulist = [];
        this.menus.checked = key;
        this.showCoins = true;
        this.pageSize = 30,
          this.start = 0,
          this.loadMore()
      }
    },

    mounted(){
      this.changeMenu(this.$route.params.state);
      var self = this;
      self.$bus.emit('headerText', '我是打手');
      self.$bus.emit('isShowRightHome', true);
    },
    destroyed(){
      var self = this;
      self.$bus.emit('headerText', '');
      self.$bus.emit('isShowRightHome', false);
    }
  }


</script>
<style src="css/dlAll/dl-cxy.css"></style>
<style scoped>
  .dlIndex {
    margin-top: .96rem;
  }
  .change {
    background: #f1f1f1;
  }
  .fadeUp-enter-active {
    animation: fadeInUp 0.5s;
    -webkit-animation: fadeInUp 0.5s;
  }

  .fadeUp-leave-active {
    animation: fadeOutDown 0.5s;
    -webkit-animation: fadeOutDown 0.5s;
  }
  #coins_id {
    background: #fff !important;
    line-height: 50px !important;
    font-size: 12px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .fixed-bottom {
    z-index: 100;
  }

</style>
<style>
  .dlMessageboxConfrim {
    order: 1;
  }

  .dlMessageboxCancel {
    order: 2;
    border-left: 1px solid #ddd !important;
  }
  .maginbottom{
    margin-bottom: 1.6rem;
  }
</style>
